<template>
  <el-card class="box-card" :body-style="bodyStyle">
    <div class="card-cont">
      <span
        >当前可用短信： <span class="msg-num">{{ msgNum }}</span> 条</span
      >
      <el-button type="primary" @click="buySign" class="buy-package-btn"
        >购买短信</el-button
      >
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    msgNum: {
      type: Number,
      default() {
        return null
      }
    }
  },
  data() {
    return {
      bodyStyle: {
        color: '#999',
        backgroundColor: '#f7f8fa',
        fontSize: '14px',
        borderRadius: '4px'
      }
    }
  },
  methods: {
    buySign() {
      window.open('https://market.w7.cc/detail?id=2373&type=20', '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.card-cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .msg-num {
    color: #3296fa;
  }
}
</style>
